import { Layout, Menu, Breadcrumb, Dropdown } from 'antd';
import {
  UserOutlined,
  LineChartOutlined,
  AppstoreOutlined,
  TeamOutlined,
  FieldTimeOutlined,
  LikeOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { history } from '@/.umi/core/history';
import { Link } from 'react-router-dom';
import { Input } from 'antd';
import { Select, Modal } from 'antd';
import { Button, message, Form } from 'antd';
import { Table, Radio, Divider } from 'antd';
import ReactDOM from 'react-dom';
import React from 'react';
import request from '@/http';
import All_style from '../../index.less';

const { Option } = Select;
const teacherManager = () => {
  const columns: any = [
    {
      title: '老师姓名',
      dataIndex: 'name',
      key: 'name',
      width: 50,
    },
    {
      title: '工号',
      dataIndex: 'userNo',
      key: 'userNo',
      width: 100,
    },
    {
      title: '身份证号码',
      dataIndex: 'idNo',
      key: 'idNo',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text: any, row: any) => {
        return row.sex == '1' ? '男' : row.sex == '0' ? '女' : '';
      },
      width: 50,
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
      width: 100,
    },
    {
      title: '职位',
      dataIndex: 'position',
      key: 'position',
      render: (text: any, row: any) => {
        return row.position == '1'
          ? '实验员'
          : row.position == '2'
          ? '讲师'
          : row.position == '3'
          ? '教授'
          : row.position == '4'
          ? '副教授'
          : row.position == '5'
          ? '主任'
          : '';
      },
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'delFlag',
      key: 'delFlag',
      render: (text: any, row: any) => {
        return row.delFlag == '0' ? '有效' : row.delFlag == '1' ? '无效' : '';
      },
      width: 100,
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 100,
      render: (text: any, row: any) => {
        return row.delFlag == '0' ? (
          <>
            <Button
              type="link"
              onClick={() => {
                showModal1(row);
              }}
            >
              编辑
            </Button>
            <Button
              type="link"
              onClick={() => {
                IsdelFlag(row.id, 0);
              }}
            >
              停用
            </Button>
          </>
        ) : row.delFlag == '1' ? (
          <>
            <Button
              type="link"
              onClick={() => {
                showModal1(row);
              }}
            >
              编辑
            </Button>
            <Button
              type="link"
              onClick={() => {
                IsdelFlag(row.id, 1);
              }}
            >
              启用
            </Button>
          </>
        ) : (
          ''
        );
      },
    },
  ];
  // 停用
  const IsdelFlag = async (id: any, delFlag: any) => {
    const result: any = await request.post('/user/updaTeacherDelFlag', {
      id: id,
      delFlag: delFlag,
    });
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize).finally();
    } else {
      message.error(result.message);
      loadData(null, 1, pagination.pageSize).finally();
    }
  };
  //弹框(新增教师)
  const [visible, setVisible] = React.useState<any>();
  const [addTeacher] = Form.useForm(); //获取新增教师的表单对象
  const showModal = () => {
    setVisible(true);
    addTeacher.setFieldsValue(null);
  };
  const modelOnOk = async () => {
    const datas = await addTeacher.validateFields();
    const result: any = await request.post('/user/addTeacher', {
      ...datas,
      role: 1,
    });
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize).finally();
    } else {
      message.error(result.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible(false);
  };
  const modelOnCancel = () => {
    setVisible(false);
  };

  //弹框（编辑）
  const [visible1, setVisible1] = React.useState<any>();
  const [changeTeacher] = Form.useForm(); //获取编辑教师的表单对象
  const [change, setChange] = React.useState({
    sex: '',
    name: '',
    position: '',
    role: '',
    idNo: '',
    mobileNo: '',
    userNo: '',
    email: '',
    id: '',
    delFlag: '',
  });
  const showModal1 = (row: any) => {
    setChange(row);
    setVisible1(true);
    changeTeacher.setFieldsValue(row);
  };
  const modelOnOk1 = async () => {
    const datas = await changeTeacher.validateFields();
    const result: any = await request.post('/user/updaTeacher', {
      ...datas,
      id: change.id,
    });
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize);
    } else {
      message.error(result.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible1(false);
  };
  const modelOnCancel1 = () => {
    setVisible1(false);
  };

  const [formObject] = Form.useForm(); //获取表单对象
  //分页
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });
  const pageOnChange = async (page: any) => {
    await loadData(formObject.getFieldsValue(), page.current, page.pageSize);
  };
  /*........................................................ */

  //数据展示及条件查询
  const [data, setData] = React.useState();
  const loadData = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const datas = await formObject.validateFields();
    const result: any = await request.post('/user/selectTeachers', {
      ...datas,
      ...queryParams,
      page: pageValue,
      number: pageSizeValue,
    });
    if (result.code == '200') {
      const newData = result.date.returnDate.map((d: any, index: any) => {
        return {
          key: `k_${index}`,
          ...d,
        };
      });
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
      });
      setData(newData);
    } else {
      message.error(result.message); //弹出错误信息
    }
  };

  //重置
  const onReset = () => {
    formObject.resetFields();
    loadData(null, 1, pagination.pageSize);
  };
  React.useEffect(() => {
    loadData(null, 1, pagination.pageSize).finally();
  }, []);

  return (
    <>
      <div className={All_style.box}>
        {/* 查询 */}
        <Form name="SelectTeacherForm" form={formObject} preserve={false}>
          <div>
            <Form.Item
              name="name"
              label="老师名字："
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input
                placeholder="输入教师名字"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <Form.Item
              name="userNo"
              label="工号："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input
                placeholder="请输入工号"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <Form.Item
              name="idNo"
              label="身份证号："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input
                name="idNO"
                placeholder="请输入身份证号"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="mobileNo"
                label="手机号码："
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="请输入手机号码"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="delFlag"
                label="状态："
                style={{ float: 'left', marginLeft: 30 }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  <Option value={'0'}>有效</Option>
                  <Option value={'1'}>无效</Option>
                </Select>
              </Form.Item>
            </div>

            <Button
              className={All_style.button}
              style={{ marginLeft: 30 }}
              onClick={() => {
                loadData(null, 1, pagination.pageSize);
              }}
            >
              查询
            </Button>
            <Button className={All_style.button2} onClick={onReset}>
              重置
            </Button>
          </div>
        </Form>

        <Button type="primary" onClick={showModal} className={All_style.button}>
          +新增教师
        </Button>
        <Modal
          title="新增教师"
          width={1250}
          maskClosable={false}
          visible={visible}
          onOk={modelOnOk}
          onCancel={modelOnCancel}
          okText="确认"
          cancelText="取消"
          destroyOnClose
        >
          <Form name="AddTeacherForm" form={addTeacher} preserve={false}>
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="name"
                label="老师名字："
                className={All_style.formItem}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '姓名不能为空!',
                  },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师姓名"
                  className={All_style.select}
                ></Input>
              </Form.Item>
              <Form.Item
                name="userNo"
                label="工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号"
                className={All_style.formItem}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '工号不能为空!',
                  },
                  { min: 6, message: '最小长度为6' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师工号"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="idNo"
                label="身份证号码"
                className={All_style.formItem}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '身份证号码不能为空!',
                  },
                  { min: 18, message: '格式不正确' },
                  { max: 18, message: '格式不正确' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师身份证号码"
                  className={All_style.select}
                ></Input>
              </Form.Item>
            </div>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="sex"
                label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择性别!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select className={All_style.select}>
                  <option value={'2'}>女</option>
                  <option value={'1'}>男</option>
                </Select>
              </Form.Item>
              <Form.Item
                name="mobileNo"
                label="手机号码"
                className={All_style.formItem}
                rules={[
                  { required: true, message: '请输入手机号码!' },
                  { min: 11, message: '格式不正确' },
                  { max: 11, message: '格式不正确' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师手机号码"
                  className={All_style.select}
                ></Input>
              </Form.Item>
              <Form.Item
                name="position"
                label="职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择职位!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select className={All_style.select}>
                  <option value={'1'}>实验员</option>
                  <option value={'2'}>讲师</option>
                  <option value={'4'}>副教授</option>
                  <option value={'3'}>教授</option>
                  <option value={'5'}>主任</option>
                </Select>
              </Form.Item>
            </div>
            <div style={{ clear: 'both' }}></div>
          </Form>
        </Modal>

        {/* 编辑 */}
        <Modal
          title="编辑"
          width={1250}
          maskClosable={false}
          visible={visible1}
          onOk={modelOnOk1}
          destroyOnClose
          onCancel={modelOnCancel1}
          okText="确认"
          cancelText="取消"
        >
          <Form
            name="changeTeacherForm"
            form={changeTeacher}
            preserve={false}
            initialValues={change}
          >
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="name"
                label="老师名字："
                className={All_style.formItem}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '姓名不能为空!',
                  },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师姓名"
                  className={All_style.select}
                ></Input>
              </Form.Item>
              <Form.Item
                name="userNo"
                label="工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号"
                className={All_style.formItem}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '工号不能为空!',
                  },
                  { min: 6, message: '最小长度为6' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师工号"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="idNo"
                label="身份证号码"
                className={All_style.formItem}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: '身份证号码不能为空!',
                  },
                  { min: 18, message: '格式不正确' },
                  { max: 18, message: '格式不正确' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师身份证号码"
                  className={All_style.select}
                ></Input>
              </Form.Item>
            </div>

            <div style={{ clear: 'both' }}>
              <Form.Item
                name="sex"
                label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择性别!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select>
                  <option value={'1'}>男</option>
                  <option value={'0'}>女</option>
                </Select>
              </Form.Item>
              <Form.Item
                name="mobileNo"
                label="手机号码"
                className={All_style.formItem}
                rules={[
                  { required: true, message: '请输入手机号码!' },
                  { min: 11, message: '格式不正确' },
                  { max: 11, message: '格式不正确' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Input
                  placeholder="请输入教师手机号码"
                  className={All_style.select}
                ></Input>
              </Form.Item>
              <Form.Item
                name="position"
                label="职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择职位!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select>
                  <option value={'1'}>实验员</option>
                  <option value={'2'}>讲师</option>
                  <option value={'4'}>副教授</option>
                  <option value={'3'}>教授</option>
                  <option value={'5'}>主任</option>
                </Select>
              </Form.Item>
            </div>
            <div style={{ clear: 'both' }}></div>
          </Form>
        </Modal>

        <Table
          columns={columns}
          dataSource={data}
          className={All_style.table}
          pagination={pagination}
          onChange={pageOnChange}
          tableLayout="fixed"
          bordered
        />
      </div>
    </>
  );
};
export default teacherManager;
